<template>
	<view class="vi_headbar">
		<view class="vi_headbar_body" :class="{'vi_headbar_fixed':setting.fixed}" :style="mainStyle">
			<!-- 背景图 -->
			<view class="vi_headbar_backgroundImage vi_headbar_full" v-if="bgImage">
				<image class="vi_headbar_full" :src="bgImage" mode="aspectFill"></image>
			</view>
			<!-- 占位 -->
			<view :style="{'height': statusHight}" v-if="bgImage"></view>
			<view v-else>
				<vi-style-controller :type="setting.type" :color="color" :height="statusHight" active></vi-style-controller>
			</view>
			<vi-style-controller :type="setting.type" :color="color" :textColor="textColor" active>
				<view class="vi_headbar_content" :class="{'vi_headbar_appletFix':appletFix}">
					<view class="vi_headbar_left" @click="onClickLeft">
						<view class="vi_headbar_box" :class="leftClass">
							<text v-if="goback" class="vi_headbar_goback iconfont" :class="iconSetting.back" @click="toback"></text>
							<slot name="left" />
						</view>
					</view>
					<view class="vi_headbar_title" :class="centerClass||''" @click="onClickTitle">
						<slot>
							<text :class="titleClass||''" v-if="title">{{ title }}</text>
						</slot>
					</view>
					<view class="vi_headbar_right" @click="onClickRight">
						<view class="vi_headbar_box" :class="rightClass">
							<slot name="right" />
						</view>
					</view>
				</view>
			</vi-style-controller>
		</view>
		<!-- 浮动时占位 -->
		<view v-if="setting.fixed">
			<view :style="{'height': statusHight}" v-if="setting.statusPlace"></view>
			<view class="vi_headbar_placeholder" />
		</view>
	</view>
</template>

<script>
	export default {
		name:"viHeadbar",
		props:{
			title:{
				type:[String,null],
				default:""
			},
			titleClass:{
				type:[String,null],
				default:""
			},
			fixed:{
				type:[Boolean,null],
				default:null
			},
			goback:{
				type:[Boolean,null],
				default:false
			},
			//状态栏占位
			statusPlace:{
				type:[Boolean,null],
				default:null
			},
			type:{
				type:[String,null],
				default:null
			},
			//导航条自定义颜色
			color:{
				type:[String,null],
				default:""
			},
			textColor:{
				type:[String,null],
				default:""
			},
			//背景图
			bgImage:{
				type:[String,null],
				default:""
			},
			zIndex:{
				type:[Number,null],
				default:null
			},
			appletFix:{
				type:[Boolean,null],
				default:false
			},
			leftClass:{
				type:[String,null],
				default:""
			},
			rightClass:{
				type:[String,null],
				default:""
			},
			centerClass:{
				type:[String,null],
				default:""
			},
			icon:{
				type:[Object,null],
				default:()=>({})
			},
			statusTop:{
				type:[Number,null],
				default:0
			}
		},
		data(){
			return {
				statusHight:0,
				dicIcon:{
					back:"icon-arr-left"
				}
			}
		},
		computed:{
			//将默认值内含到css、计算属性等地方，只内含真值
			//规避特殊使用的情况下，由prop传入undefined、null等无效数据导致的，默认值失效问题。例如组件嵌套且需要组件间参数传递
			//HBuilder X3.3.13; 微信开发者工具stable 1.05.2111300
			//微信小程序会对传入的undefined、null值根据参数类型输出不同空值(false、""、null、0)，参数类型为null或未指定参数类型则输出null
			//H5会对传入的undefined取默认值，未设默认值则输出undefined。对传入的null值固定输出null
			//做参数传递时需警惕两者行为不同而造成的陷阱，主要问题出现在微信小程序的空值转化，输出非用户传入的空值、假值，使默认真值丢失
			//兼容空值取默认值的可行方案目前为，参数类型加入null如[Boolean,null]，判断传入参数是否为定义的类型，是则使用，否则赋予默认值
			setting(){
				return {
					fixed: this.$api.isBoolean(this.fixed)? this.fixed :true,
					statusPlace: this.$api.isBoolean(this.statusPlace)? this.statusPlace :true,
					type: this.$api.isDefined(this.type)? this.type :"primary",
					zIndex: this.$api.isValue(this.zIndex)? this.zIndex :201,
				}
			},
			iconSetting(){
				if(this.$api.isObject(this.icon)){
					return Object.assign({},this.dicIcon,this.icon)
				}
				return this.dicIcon
			},
			mainStyle(){
				return this.setting.fixed?`z-index:${this.setting.zIndex};`:''
			}
		},
		methods:{
			toback(){
				this.$api.goback()
			},
			onClickLeft(){
				this.$emit("clickLeft")
			},
			onClickRight(){
				this.$emit("clickRight")
			},
			onClickTitle(){
				this.$emit("clickTitle")
			},
		},
		created(){
			if(this.setting.statusPlace){
				this.statusHight = (this.statusTop || uni.getSystemInfoSync().statusBarHeight) + 'px'
			}
		}
	};
</script>

<style lang="scss">
.vi_headbar{
	width: 100%;
	.vi_headbar_body{
		position: relative;
		overflow: hidden;
		width: 100%;
		&.vi_headbar_fixed {
			position: fixed;
		}
		.vi_headbar_backgroundImage{
			position: absolute;
			top: 0;
			left: 0;
		}
		.vi_headbar_content {
			position: relative;
			width: 100%;
			height: $vi-hight-navbar;
			line-height: 1;
			box-sizing: border-box;
			/* #ifndef H5 || APP */
			&.vi_headbar_appletFix{
				width: calc(100% - 100px);
				margin-right: 100px;
			}
			/* #endif */
			.vi_headbar_left,
			.vi_headbar_right{
				position: absolute;
				top: 0;
				height: 100%;
				display: flex;
				align-items: center;
			}
			.vi_headbar_left{
				left: 0.5em;
			}
			.vi_headbar_right{
				right:0.5em;
			}
			.vi_headbar_title {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				overflow: hidden;
				height: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.vi_headbar_box{
				display: flex;
				align-items: center;
			}
			.vi_headbar_goback{
				margin-right: 0.25em;
				padding: 0.5em;
			}
		}
	}
	.vi_headbar_placeholder {
		height: $vi-hight-navbar;
	}
	.vi_headbar_full{
		width: 100%;
		height: 100%;
	}
}
</style>